import { Image, StyleSheet, Text, View, TouchableOpacity } from 'react-native'
import { getScreenHeight, getScreenWidth } from '@/utils/auto'
import { Button, Card, List, Toast } from '@ant-design/react-native'
import React, { useCallback, useEffect, useState } from 'react'
import { Entypo } from '@expo/vector-icons'
import { router, useFocusEffect } from 'expo-router'
import AsyncStorage from '@react-native-async-storage/async-storage'

const Item = List.Item

export default function my() {

    const [info, setInfo] = useState({
        user: '请登录',
        phone: '',
        image: 'https://img0.baidu.com/it/u=1240274933,2284862568&fm=253&fmt=auto&app=138&f=PNG?w=180&h=180',
        sex: ''
    })

    useFocusEffect(
        useCallback(() => {
            const fetchUserInfo = async () => {
                try {
                    const res = await AsyncStorage.getItem('userInfo');
                    if (res) {
                        setInfo(JSON.parse(res));
                    } else {
                        router.push('/LoginModel/login')
                    }
                } catch (error) {
                    console.error('Error fetching user info:', error);
                }
            };
            fetchUserInfo();
        }, []) // 依赖数组为空，确保只在组件挂载时运行一次
    );

    return (
        <View style={styles.container}>
            <View style={styles.head}>
                <TouchableOpacity onPress={() => {
                    router.push('/userInfo')
                }}>
                    <View style={styles.userinfo}>
                        <View>
                            <Image style={styles.avatar}
                                source={{ uri: info.image }}
                            >
                            </Image>
                        </View>
                        <View style={styles.name}>
                            <Text style={styles.fontcolor}>{info.user}</Text>
                            <Text style={styles.fontcolor}>{info.phone}</Text>
                        </View>
                    </View>
                </TouchableOpacity>
            </View>

            <View style={styles.order}>
                <Card full>
                    <TouchableOpacity onPress={() => { router.push('/myOrder') }}>
                        <Card.Header
                            title="我的订单"
                            thumbStyle={{ width: 30, height: 30 }}
                        />
                    </TouchableOpacity>
                    <Card.Body>
                        <View style={styles.methods}>
                            <TouchableOpacity onPress={() => { }}>
                                <View style={styles.orderitem}>
                                    <Image style={styles.avatars} source={require('@/assets/myImage/u2208.png')}></Image>
                                    <Text style={{ marginTop: 5 }}>待付款</Text>
                                </View>
                            </TouchableOpacity>

                            <TouchableOpacity onPress={() => { }}>
                                <View style={styles.orderitem}>
                                    <Image style={styles.avatars} source={require('@/assets/myImage/u2211.png')}></Image>
                                    <Text style={{ marginTop: 5 }}>待收货</Text>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => { }}>
                                <View style={styles.orderitem}>
                                    <Image style={styles.avatars} source={require('@/assets/myImage/u2214.png')}></Image>
                                    <Text style={{ marginTop: 5 }}>已完成</Text>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => { }}>
                                <View style={styles.orderitem}>
                                    <Image style={styles.avatars} source={require('@/assets/myImage/u2217.png')}></Image>
                                    <Text style={{ marginTop: 5 }}>待评价</Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                    </Card.Body>
                </Card>
            </View>

            <View style={styles.order}>
                <List>
                    <Item
                        thumb={<Image style={{ margin: 10 }} source={require("@/assets/myImage/u2222.png")}></Image>}
                        extra={<Entypo name="chevron-small-right" size={24} color="black" />}
                        onPress={() => { router.push('/AddressPage') }}
                    >
                        我的地址
                    </Item>
                    <Item
                        thumb={<Image style={{ margin: 10 }} source={require("@/assets/myImage/u2226.png")}></Image>}
                        extra={<Entypo name="chevron-small-right" size={24} color="black" />}
                        onPress={() => { router.push('/myCollect') }}
                    >
                        我的收藏
                    </Item>
                    <Item
                        thumb={<Image style={{ margin: 10 }} source={require("@/assets/myImage/u2230.png")}></Image>}
                        extra={<Entypo name="chevron-small-right" size={24} color="black" />}
                        onPress={() => { router.push('/feedBack') }}
                    >
                        意见反馈
                    </Item>
                </List >
            </View >

            <View>
                <Button
                    type="warning"
                    style={styles.out}
                    onPress={() => {
                        AsyncStorage.removeItem('userInfo')
                        setInfo({
                            user: '请登录',
                            phone: '',
                            image: 'https://img0.baidu.com/it/u=1240274933,2284862568&fm=253&fmt=auto&app=138&f=PNG?w=180&h=180',
                            sex: ''
                        })
                        Toast.success('退出成功')
                    }}
                >
                    退出
                </Button>
            </View>

        </View >
    )
}

const styles = StyleSheet.create({
    container: {
        width: getScreenWidth(),
        height: getScreenHeight(),
        backgroundColor: "rgb(245,248,255)"
    },
    head: {
        height: 160,
        width: getScreenWidth(),
        backgroundColor: "rgb(151,206,53)",
        justifyContent: "flex-end"

    },
    avatar: {
        width: 60,
        height: 60,
        borderRadius: 35,
        borderColor: "white",
        borderWidth: 2,
    },
    avatars: {
        width: 50,
        height: 50,
        borderColor: "white",
        borderWidth: 2,
    },
    userinfo: {
        width: getScreenWidth(),
        height: 100,
        padding: 20,
        flexDirection: "row",
    },
    fontcolor: {
        color: "white",
        fontWeight: "bold",
        fontSize: 20
    },
    name: {
        marginLeft: 10,
        justifyContent: "space-around"
    },
    order: {
        width: getScreenWidth(),
        padding: 20,
        borderRadius: 10
    },
    orderitem: {
        width: 80,
        height: 80,
        borderRadius: 30,
        alignItems: "center",
    },
    methods: {
        height: 80,
        flexDirection: "row",
        justifyContent: "space-around"
    },
    out: {
        width: getScreenWidth() - 40,
        margin: 20,
        borderRadius: 10
    }
})